import React from 'react';
import {MyBreadcrumb} from '@/components/myBreadcrumb'
import { connect, Dispatch } from 'umi'
import { IBanner } from './banner';
import { useMount } from 'ahooks';
import { Table, Image, Space, Button, Popconfirm,Form,Input ,Upload} from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import { deleteBannerReq, addBannerReq } from '../../service/banner'
type BannerListProps = {

};
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const normFile = (e: any) => {
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};
const index: React.FC<BannerListProps> = (props: { bannerList: Array<IBanner>, dispatch: Dispatch }) => {
  const { bannerList, dispatch } = props
  const onFinish = (values: any) => {
    const img = values.upload[0].thumbUrl
    const { link, alt } = values
    // console.log('Received values of form: ', img);
    // 上传轮播图
    addBannerReq({ link, alt, img }).then((res) => {
      dispatch({
        type: 'banner/getBannerListEffect'
      })
    })
  };
  useMount(() => {
    dispatch({
      type: 'banner/getBannerListEffect'
    })
    
  })
  
  const columns: any = [
    {
      title: '序号',
      render (text: null, record: IBanner, index: number) {
        return <span>{ index + 1}</span>
      }
    },
    {
      title: '图片',
      dataIndex: 'img',
      render (text: string, record: IBanner) {
        return (
          <Image src={ text } style={{ width: 200 }} />
        )
      }
    },
    {
      title: '链接link',
      dataIndex: 'link',
    },
    {
      title: '提示alt',
      dataIndex: 'alt',
      render (text: null, record: IBanner, index: number) {
        return (
          <Space>
            <Button type="ghost">编辑</Button>
            <Popconfirm
              title="确定删除吗?"
              onConfirm={() => {
                deleteBannerReq({ bannerid: record.bannerid }).then(() => {
                  const arr = JSON.parse(JSON.stringify(bannerList))
                  arr.splice(index, 1)
                  dispatch({
                    type: 'banner/UPDATE_BANNER_LIST',
                    payload: arr
                  })
                })
              }}
              okText="确定"
              cancelText="取消"
            >
              <Button danger>删除</Button>
            </Popconfirm>
          </Space>
        )
      }
    }
  ]
  return (
    <>
      <MyBreadcrumb />
      <div>
        <Form
      name="validate_other"
      {...formItemLayout}
      onFinish={onFinish}
      initialValues={{
        'link': '',
        'alt': '',
        'img': ''
      }}
    >
      <Form.Item label="Plain Text">
        <span className="ant-form-text">添加轮播图</span>
      </Form.Item>
      <Form.Item
        name="link"
        label="link"
      >
        <Input size="large" placeholder="跳转的链接地址" />
      </Form.Item>
      <Form.Item
        name="alt"
        label="alt"
      >
        <Input size="large" placeholder="提示信息" />
      </Form.Item>
      <Form.Item
        name="upload"
        label="上传图片"
        valuePropName="img"
        getValueFromEvent={normFile}
      >
        <Upload name="banner"  listType="picture">
          <Button icon={<UploadOutlined />}>Click to upload</Button>
        </Upload>
      </Form.Item>
      <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
      </div>
      <Table
        dataSource = { bannerList }
        columns = { columns }
        rowKey="bannerid"/>
    </>
  )
}
export default connect((state: any) => {
  return {
    bannerList: state.banner.bannerList
  }
})(index);